const Index = () => {
  return (
    <div>
      <h3 style={{ color: '#666', fontSize: '15px', margin: '10px' }}>热搜榜/全部类型</h3>
      <div className="bg-white w-full">
        {/* 1 */}
        <div
          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
          className="bg-slate-100 w-full h-[150px]">
          {/* 左 */}
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <img style={{ width: "220px", height: '100px' }} src="" alt="" />
            <div style={{ marginLeft: '10px' }}>
              <p>互联互通正塑造中国——中亚新格局</p>
              <p style={{ fontSize: '15px', color: '#666' }}>查看更多》</p>
            </div>
          </div>
          {/* 右 */}
          <div style={{ marginRight: '20px' }}>
            <p style={{ fontSize: '20px', color: '#ccc' }}>7904603</p>
            <p style={{ fontSize: '15px', color: '#ccc' }}>热搜指数</p>
          </div>
        </div>
        {/* 2 */}
        <div
          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
          className="bg-slate-100 w-full h-[150px]">
          {/* 左 */}
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <img style={{ width: "220px", height: '100px' }} src='https://mdn.alipayobjects.com/huamei_j9rjmc/afts/img/A*3ittT5OEo2gAAAAAAAAAAAAADvGmAQ/original' alt="" />
            <div style={{ marginLeft: '10px' }}>
              <p>迁-15西太平洋雨中带弹驱离外机<span style={{ background: "orange", color: '#fff', padding: "2px", fontSize: '10px', borderRadius: "5px", marginLeft: "10px" }}>热</span></p>
              <p style={{ fontSize: '15px', color: '#666' }}>查看更多》</p>
            </div>
          </div>
          {/* 右 */}
          <div style={{ marginRight: '20px' }}>
            <p style={{ fontSize: '20px', color: '#ccc' }}>7809311</p>
            <p style={{ fontSize: '15px', color: '#ccc' }}>热搜指数</p>
          </div>
        </div>
        {/* 3 */}
        <div
          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
          className="bg-slate-100 w-full h-[150px]">
          {/* 左 */}
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <img style={{ width: "220px", height: '100px' }} src='https://avatars.githubusercontent.com/u/27722486?s=40&v=4' alt="" />
            <div style={{ marginLeft: '10px' }}>
              <p>浙江一大学学费每人每学年9.6万<span style={{ background: "orange", color: '#fff', padding: "2px", fontSize: '10px', borderRadius: "5px", marginLeft: "10px" }}>热</span></p>
              <p style={{ fontSize: '15px', color: '#666' }}>查看更多》</p>
            </div>
          </div>
          {/* 右 */}
          <div style={{ marginRight: '20px' }}>
            <p style={{ fontSize: '20px', color: '#ccc' }}>7713847</p>
            <p style={{ fontSize: '15px', color: '#ccc' }}>热搜指数</p>
          </div>
        </div>
        {/* 4 */}
        <div
          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
          className="bg-slate-100 w-full h-[150px]">
          {/* 左 */}
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <img style={{ width: "220px", height: '100px' }} src="https://avatars.githubusercontent.com/u/15713772?s=40&v=4" alt="" />
            <div style={{ marginLeft: '10px' }}>
              <p>高温天小心这些物品成为危险品</p>
              <p style={{ fontSize: '15px', color: '#666' }}>查看更多》</p>
            </div>
          </div>
          {/* 右 */}
          <div style={{ marginRight: '20px' }}>
            <p style={{ fontSize: '20px', color: '#ccc' }}>7617951</p>
            <p style={{ fontSize: '15px', color: '#ccc' }}>热搜指数</p>
          </div>
        </div>
        {/* 5 */}
        <div
          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
          className="bg-slate-100 w-full h-[150px]">
          {/* 左 */}
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <img style={{ width: "220px", height: '100px' }} src='https://avatars.githubusercontent.com/u/27722486?s=40&v=4' alt="" />
            <div style={{ marginLeft: '10px' }}>
              <p>曝凤凰传奇演唱会取消与手表无关<span style={{ background: "red", color: '#fff', padding: "2px", fontSize: '10px', borderRadius: "5px", marginLeft: "10px" }}>新</span></p>
              <p style={{ fontSize: '15px', color: '#666' }}>查看更多》</p>
            </div>
          </div>
          {/* 右 */}
          <div style={{ marginRight: '20px' }}>
            <p style={{ fontSize: '20px', color: '#ccc' }}>7524244</p>
            <p style={{ fontSize: '15px', color: '#ccc' }}>热搜指数</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
